<template>
  <div>
    <el-dialog :visible="dialogVisible" title="元素周期表" center :show-close="false" class="dialog" >
      <div class="close-btn" @click="handClose">
        <i class="el-icon-close"></i>
      </div>
      <div class="element">
        <!-- 上面按列来布局 -->
        <div class="element-top">
          <div v-for="column in topColumn" :key="column.Name" class="column">
            <div
              v-for="element in column.elementArr"
              :key="element.AT"
              class="base-element column-element "
              :class="'color-' + element.color"
              @click="handleClickElement(element)"
            >
              {{ element['Name'] }}
              <div class="AT">{{ element.AT }}</div>
            </div>
          </div>
        </div>
        <!-- 下面的盒子 -->
        <div class="element-bottom">
          <div class="line">
            <div
              v-for="element in LaColumn"
              :key="element.AT"
              class="base-element line-element"
              :class="'color-' + element.color"
              @click="handleClickElement(element)"
            >
              {{ element.Name }}
              <div class="AT">{{ element.AT }}</div>
            </div>
          </div>
          <div class="line">
            <div
              v-for="element in AcColumn"
              :key="element.AT"
              class="base-element line-element"
              :class="'color-' + element.color"
              @click="handleClickElement(element)"
            >
              {{ element.Name }}
              <div class="AT">{{ element.AT }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap">
        <div class="wrapTop">
          <p>{{elememtName}}</p>
          <span>{{elememtValue}}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["dialogVisible"],
  data() {
    return {
      elememtValue:1,
      elememtName:'H',
      topColumn :[
        {
          Name: '1',
          elementArr: [
            { Name: 'H',  AT: 1, color: 7, AtomicWeightF: 1.00794},
            { Name: 'Li', AT: 3, color: 1, AtomicWeightF: 6.941},
            { Name: 'Na', AT: 11,color: 1, AtomicWeightF: 22.9898},
            { Name: 'K',  AT: 19,color: 1, AtomicWeightF: 39.0983},
            { Name: 'Rb', AT: 37,color: 1, AtomicWeightF: 85.4678 },
            { Name: 'CS', AT: 55,color: 1, AtomicWeightF: 132.9054},
            { Name: 'Fr', AT: 87,color: 1, AtomicWeightF: 223},
          ],
        },
        {
          Name: '2',
          elementArr: [
            { Name: 'Be', AT: 4,  color: 2, AtomicWeightF: 9.01218},
            { Name: 'Mg', AT: 12, color: 2, AtomicWeightF: 24.305},
            { Name: 'Ca', AT: 20, color: 2, AtomicWeightF: 40.08},
            { Name: 'Sr', AT: 38, color: 2, AtomicWeightF: 87.62},
            { Name: 'Ba', AT: 56, color: 2, AtomicWeightF: 137.32},
            { Name: 'Ra', AT: 88, color: 2, AtomicWeightF: 226.0254},
          ],
        },
        {
          Name: '3',
          elementArr: [
            { Name: 'Sc', AT: 21, color: 3, AtomicWeightF: 44.9559},
            { Name: 'Y' , AT: 39, color: 3, AtomicWeightF: 88.9059 },
            { Name: 'Lu', AT: 71, color: 9, AtomicWeightF: 174.967},
            { Name: 'Lr', AT: 103,color: 9, AtomicWeightF: 260},
          ],
        },
        {
          Name: '4',
          elementArr: [
            { Name: 'Ti', AT: 22, color: 3, AtomicWeightF: 47.9},
            { Name: 'Zr', AT: 40, color: 3, AtomicWeightF: 91.22},
            { Name: 'Hf', AT: 72, color: 3, AtomicWeightF: 178.49},
            { Name: 'Rf', AT: 104,color: 3, AtomicWeightF: 261},
          ],
        },
        {
          Name: '5',
          elementArr: [
            { Name: 'V',  AT: 23,  color: 3, AtomicWeightF: 50.9415},
            { Name: 'Nb', AT: 41,  color: 3, AtomicWeightF: 92.9064},
            { Name: 'Ta', AT: 73,  color: 3, AtomicWeightF: 180.9479 },
            { Name: 'Db', AT: 105, color: 3, AtomicWeightF: 262 },
          ],
        },
        {
          Name: '6',
          elementArr: [
            { Name: 'Cr', AT: 24, color: 3, AtomicWeightF: 51.996},
            { Name: 'Mo', AT: 42, color: 3, AtomicWeightF: 95.94 },
            { Name: 'W',  AT: 74, color: 3, AtomicWeightF: 183.85},
            { Name: 'Sg', AT: 106,color: 3, AtomicWeightF: 263},
          ],
        },
        {
          Name: '7',
          elementArr: [
            { Name: 'Mn', AT: 25, color: 3, AtomicWeightF:54.938 },
            { Name: 'Tc', AT: 43, color: 3, AtomicWeightF:98},
            { Name: 'Re', AT: 75, color: 3, AtomicWeightF:186.207 },
            { Name: 'Bh', AT: 107,color: 3, AtomicWeightF:258 },
          ],
        },
        {
          Name: '8',
          elementArr: [
            { Name: 'Fe', AT: 26, color: 3, AtomicWeightF: 55.847},
            { Name: 'Ru', AT: 44, color: 3, AtomicWeightF: 101.07},
            { Name: 'Os', AT: 76, color: 3, AtomicWeightF: 190.2},
            { Name: 'Hs', AT: 108,color: 3, AtomicWeightF: 269.1336},
          ],
        },
        {
          Name: '9',
          elementArr: [
            { Name: 'Co', AT: 27, color: 3, AtomicWeightF: 58.9332 },
            { Name: 'Rh', AT: 45, color: 3, AtomicWeightF: 102.9055 },
            { Name: 'Ir', AT: 77, color: 3, AtomicWeightF: 192.22 },
            { Name: 'Mt', AT: 109,color: 3, AtomicWeightF: 227.154 },
          ],
        },
        {
          Name: '10',
          elementArr: [
            { Name: 'Ni', AT: 28, color: 3, AtomicWeightF:58.7},
            { Name: 'Pd', AT: 46, color: 3, AtomicWeightF:106.4},
            { Name: 'Pt', AT: 78, color: 3, AtomicWeightF:195.09},
            { Name: 'Ds', AT: 110,color: 3, AtomicWeightF:282.166},
          ],
        },
        {
          Name: '11',
          elementArr: [
            { Name: 'Cu', AT: 29, color: 3, AtomicWeightF: 63.546},
            { Name: 'Ag', AT: 47, color: 3, AtomicWeightF: 107.868},
            { Name: 'Au', AT: 79, color: 3, AtomicWeightF: 196.9665},
            { Name: 'Rg', AT: 111,color: 3, AtomicWeightF: 282.169},
          ],
        },
        {
          Name: '12',
          elementArr: [
            { Name: 'Zn', AT: 30, color: 3, AtomicWeightF: 60.38},
            { Name: 'Cd', AT: 48, color: 3, AtomicWeightF: 112.41},
            { Name: 'Hg', AT: 80, color: 3, AtomicWeightF: 200.59},
            { Name: 'Cn', AT: 112,color: 3, AtomicWeightF: 286.179},
          ],
        },
        {
          Name: '13',
          elementArr: [
            { Name: 'B',  AT: 5,  color: 4, AtomicWeightF:10.81},
            { Name: 'Al', AT: 13, color: 9, AtomicWeightF:26.9815},
            { Name: 'Ga', AT: 31, color: 9, AtomicWeightF:69.72},
            { Name: 'In', AT: 49, color: 9, AtomicWeightF:114.82},
            { Name: 'Tl', AT: 81, color: 9, AtomicWeightF:204.37},
            { Name: 'Nh', AT: 113,color: 9, AtomicWeightF:286.182},
          ],
        },
        {
          Name: '14',
          elementArr: [
            { Name: 'C',  AT: 6,  color: 7, AtomicWeightF: 12.011},
            { Name: 'Si', AT: 14, color: 4, AtomicWeightF: 28.0855},
            { Name: 'Ge', AT: 32, color: 4, AtomicWeightF: 72.59},
            { Name: 'Sn', AT: 50, color: 9, AtomicWeightF: 118.69},
            { Name: 'Pb', AT: 82, color: 9, AtomicWeightF: 207.2},
            { Name: 'Fl', AT: 114, color:9, AtomicWeightF: 290.192},
          ],
        },
        {
          Name: '15',
          elementArr: [
            { Name: 'N',  AT: 7,  color: 7, AtomicWeightF:14.0067},
            { Name: 'P',  AT: 15, color: 7, AtomicWeightF:30.9738},
            { Name: 'As', AT: 33, color: 4, AtomicWeightF:74.9216},
            { Name: 'Sb', AT: 51, color: 4, AtomicWeightF:121.75 },
            { Name: 'Bi', AT: 83, color: 9, AtomicWeightF:208.9804 },
            { Name: 'Mc', AT: 115,color: 9, AtomicWeightF:290.196 },
          ],
        },
        {
          Name: '',
          elementArr: [
            { Name: 'O',  AT: 8,  color: 7, AtomicWeightF: 15.9994 },
            { Name: 'S',  AT: 16, color: 7, AtomicWeightF: 32.06 },
            { Name: 'Se', AT: 34, color: 7, AtomicWeightF: 78.96 },
            { Name: 'Te', AT: 52, color: 4, AtomicWeightF: 127.6 },
            { Name: 'Po', AT: 84, color: 4, AtomicWeightF: 209 },
            { Name: 'Lv', AT: 116,color: 9, AtomicWeightF: 293.205 },
          ],
        },
        {
          Name: '16',
          elementArr: [
            { Name: 'F',  AT: 9,  color: 6, AtomicWeightF: 18.9984 },
            { Name: 'Cl', AT: 17, color: 6, AtomicWeightF: 35.453 },
            { Name: 'Br', AT: 35, color: 6, AtomicWeightF: 79.904 },
            { Name: 'I',  AT: 53, color: 6, AtomicWeightF: 126.9045},
            { Name: 'At', AT: 85, color: 6, AtomicWeightF: 210 },
            { Name: 'Ts', AT: 117,color: 6, AtomicWeightF: 294.211 },
          ],
        },
        {
          Name: '17',
          elementArr: [
            { Name: 'He', AT: 2,  color: 0, AtomicWeightF: 4.002},
            { Name: 'Ne', AT: 10, color: 0, AtomicWeightF: 20.179},
            { Name: 'Ar', AT: 18, color: 0, AtomicWeightF: 39.948},
            { Name: 'Kr', AT: 36, color: 0, AtomicWeightF: 83.8},
            { Name: 'Xe', AT: 54, color: 0, AtomicWeightF: 131.3},
            { Name: 'Rn', AT: 86, color: 0, AtomicWeightF: 222},
            { Name: 'Og', AT: 118,color: 0, AtomicWeightF: 295.216},
          ],
        },
      ],
      // 镧系
      LaColumn : [
        { Name: 'La', AT: 57, color: 8, AtomicWeightF:138.9055 },
        { Name: 'Ce', AT: 58, color: 8, AtomicWeightF:140.12},
        { Name: 'Pr', AT: 59, color: 8, AtomicWeightF:140.9077 },
        { Name: 'Nd', AT: 60, color: 8, AtomicWeightF:144.24 },
        { Name: 'Pm', AT: 61, color: 8, AtomicWeightF:145 },
        { Name: 'Sm', AT: 62, color: 8, AtomicWeightF:150.4 },
        { Name: 'Eu', AT: 63, color: 8, AtomicWeightF:151.96 },
        { Name: 'Gd', AT: 64, color: 8, AtomicWeightF:157.25 },
        { Name: 'Tb', AT: 65, color: 8, AtomicWeightF:158.9254 },
        { Name: 'Dy', AT: 66, color: 8, AtomicWeightF:162.5 },
        { Name: 'Ho', AT: 67, color: 8, AtomicWeightF:164.9304 },
        { Name: 'Er', AT: 68, color: 8, AtomicWeightF:167.26 },
        { Name: 'Tm', AT: 69, color: 8, AtomicWeightF:168.9342 },
        { Name: 'Yb', AT: 70, color: 8, AtomicWeightF:173.04 },
        // { Name: 'Lu', AT: 71, color: 8,AtomicWeightF:174.96 },
      ],
      AcColumn : [
        { Name: 'Ac', AT: 89, color: 9, AtomicWeightF: 227.0278 },
        { Name: 'Th', AT: 90, color: 9, AtomicWeightF: 232.0381 },
        { Name: 'Pa', AT: 91, color: 9, AtomicWeightF: 231.0359 },
        { Name: 'U',  AT: 92, color: 9, AtomicWeightF: 238.029 },
        { Name: 'Np', AT: 93, color: 9, AtomicWeightF: 237 },
        { Name: 'Pu', AT: 94, color: 9, AtomicWeightF: 244 },
        { Name: 'Am', AT: 95, color: 9, AtomicWeightF: 243 },
        { Name: 'Cm', AT: 96, color: 9, AtomicWeightF: 247 },
        { Name: 'Bk', AT: 97, color: 9, AtomicWeightF: 247 },
        { Name: 'Cf', AT: 98, color: 9, AtomicWeightF: 251 },
        { Name: 'Es', AT: 99, color: 9, AtomicWeightF: 252 },
        { Name: 'Fm', AT: 100,color: 9, AtomicWeightF: 257 },
        { Name: 'Md', AT: 101,color: 9, AtomicWeightF: 258 },
        { Name: 'No', AT: 102,color: 9, AtomicWeightF: 259 },
        // { Name: 'Lr', AT: 103,color: 2,AtomicWeightF:260},
      ],
    };
  },
  methods: {
    handleClickElement(val){
      this.elememtValue=val.AT
      this.elememtName=val.Name
  
    },
    handClose(){
      this.$emit('handleClose')
    }
  },
};
</script>
<style lang="scss" scoped>
.dialog {
  .title {
    font-size: 22px;
  }
  .top-title {
    position: relative;
    .top-btn {
      span {
        font-size: 16px;
      }
      position: absolute;
      top: -10px;
      right: 50px;
    }
  }
  ::v-deep .el-dialog {
    border-radius: 10px;
    width:65% !important;
  }
  .el-dialog__title {
    font-size: 28px;
    font-weight: 800;
  }

  .el-dialog--center .el-dialog__body {
    padding-top: 10px;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 65px;
    padding-top: 6px;
    height: 39px;
    border-radius: 0 10px 0 0;
    font-size: 30px;
    color: #333333;
    .el-icon-close {
      font-size: 30px;
    }
    cursor: pointer;
    &:hover {
      color: #ffffff;
      background: #ff7676;
    }
  }
  .title {
    position: absolute;
    left: 28vw;
    top: 5vh;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: black;
  }
  .element{
    background-color: #000;
    padding:10px 0px 30px 0px;
    border-radius:5px;
    width:100%;
    height:100%
  }
  .element-top {
    margin:0.5rem 0rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .column {
    width: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0rem 0rem;
  }
  .line {
    width: 100%;
    margin: 0rem 0rem;
    display: flex;
    justify-content: center;
  }
  .base-element {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: center;
    padding-top: 8px;
    border:1px solid #111;
    border-radius: 4px;
    box-shadow: 0 0 6px 6px rgba(0, 0, 0, .25) inset;
  }
  .AT {
    font-size: 12px;
    font-weight: normal;
    color:rgb(36, 36, 36);
    // margin-top:1px;
  }
  .column-element {
    margin-top: 0rem;
  }
  .line-element {
      margin: 0rem 0rem;
  }
  .base-element:hover {
    cursor: pointer;
    -webkit-transform: scale(1.75);
    transform: scale(1.75);
    transition: -webkit-transform 0.1s ease;
    transition: transform 0.1s ease;
    transition: transform 0.1s ease, -webkit-transform 0.1s ease;
    z-index:9999;
  }
  .color-0 {
    background-color: #91e0ff;
    color: rgb(0, 0, 0);
  }
  .color-1 {
    background-color: #fdc268;
    color: black;
  }
  .color-2 {
    background-color: #e7dab8;
    color: black;
  }
  .color-3 {
    background-color: #d9e98e;
    color: black;
  }
  .color-4 {
    background-color: #92f89e;
    color: black;
  }
  .color-5 {
    background-color: #c8c8c8;
    color: rgb(0, 0, 0);
  }
  .color-6 {
    background-color: #FCA8FC;
    color: black;
  }
  .color-7 {
    background-color: #F1BDAB;
    color: black;
  }
  .color-8 {
    background-color: #FCFC80;
    color: black;
  }
  .color-9{
    background-color: #c1f7f7;
    color: black;
  }
 
  .linraryIpt{
    width:320px;
  }
  .wrap{
    padding:20px 0px 0px 120px;
    .wrapTop{
      position: absolute;
      left:42%;
      top:15%;
      width:120px;
      height:120px;
      background-color: #c1f7f7;
      border:1px solid #000;
      font-size: 18px;
      text-align: center;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      border:1px solid #111;
      border-radius: 4px;
      box-shadow: 0 0 5px 5px rgba(0, 0, 0, .25) inset;
      p{
        font-size:38px;
        font-weight:600;
        margin:0px 0px 6px 0px;
      }
      span{
       color:rgb(109, 109, 109);
      }
    }
  }
}
@media (max-width: 1550px) {
  .dialog{
    ::v-deep .el-dialog {
      border-radius: 10px;
      width:75% !important;
      overflow-x: scroll;
      margin-top:6vh !important;
      
    }
    ::v-deep .el-dialog--center .el-dialog__body{
      padding-bottom:0px;
    }
    .element{
      background-color: #E0E7ED;
      padding:5px 0px 10px 0px;
      border-radius:5px;
      width:100%;
      height:100%
    }
    .element-top {
      margin:0rem 0rem 0.4rem 0rem;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    .column {
      width: 3rem;
      // height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin: 0.1rem 0.1rem;
    }
    .line {
      width: 100%;
      margin: 0.1rem 0.1rem;
      display: flex;
      justify-content: center;
    }
    .base-element {
      width: 3rem;
      height: 3rem;
      font-size: 14px;
      font-weight: bolder;
      text-align: center;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      justify-content: center;
      padding-top: 5px;
      border:1px solid #111;
      border-radius: 4px;
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, .25) inset;
    }
   .wrap{
      padding:20px 0px 0px 120px;
      .wrapTop{
        position: absolute;
        left:42%;
        top:15%;
        width:100px;
        height:100px;
        background-color: #c1f7f7;
        border:1px solid #000;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        border:1px solid #111;
        border-radius: 4px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, .25) inset;
        p{
          font-size:38px;
          font-weight:600;
          margin:0px 0px 6px 0px;
        }
        span{
        color:rgb(109, 109, 109);
        }
      }
    }
    .clsBtn{
      width:70px;
      height:35px;
      text-align: center;
      line-height: 5px;
    }
  }
  ::v-deep .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:44%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 15px);
   }
  ::v-deep  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
  }
}
/* 响应式布局 */
@media (max-width: 1400px) {
  .dialog{
    ::v-deep .el-dialog {
      border-radius: 10px;
      width:84% !important;
      overflow-x: scroll;
    }
    ::v-deep .el-dialog--center .el-dialog__body{
      padding-bottom:0px;
    }
    .element{
      background-color: #E0E7ED;
      padding:5px 0px 10px 0px;
      border-radius:5px;
      width:100%;
      height:100%
    }
    .element-top {
      margin:0rem 0rem 0.4rem 0rem;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    .column {
      width: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin: 0.1rem 0.1rem;
    }
    .line {
      width: 100%;
      margin: 0.1rem 0.1rem;
      display: flex;
      justify-content: center;
    }
    .base-element {
      width: 3rem;
      height: 3rem;
      font-size: 14px;
      font-weight: bolder;
      text-align: center;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      justify-content: center;
      padding-top: 5px;
      border:1px solid #111;
      border-radius: 4px;
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, .25) inset;
    }
   .wrap{
      padding:20px 0px 0px 120px;
      .wrapTop{
        position: absolute;
        left:42%;
        top:15%;
        width:100px;
        height:100px;
        background-color: #c1f7f7;
        border:1px solid #000;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        border:1px solid #111;
        border-radius: 4px;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, .25) inset;
        p{
          font-size:38px;
          font-weight:600;
          margin:0px 0px 6px 0px;
        }
        span{
        color:rgb(109, 109, 109);
        }
      }
    }
    .clsBtn{
      width:70px;
      height:35px;
      text-align: center;
      line-height: 5px;
    }
  }
  ::v-deep .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:44%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 15px);
   }
  ::v-deep  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
   }
}
</style>
